<!--
 * @Author: wangjian
 * 656876071@qq.com
 * @Date: 2024-08-12 16:04:25
 * @LastEditTime: 2024-10-08 10:39:24
 * @FilePath: src/views/sys/menu/Entrance.vue
 * @Description: 
 -->
<script setup lang="ts">
import {h, onMounted, provide, ref} from 'vue'
import {SearchOutlined, CiCircleFilled, PlusOutlined} from '@ant-design/icons-vue'
import {useEntrance} from './Hooks'
import MenuForm from "@/views/sys/menu/MenuForm.vue";
import {DICT_COLLECTION_SYMBOL, useDict} from "@/core/common/hooks/DictHooks";
import TableDictCellProp from "@/core/common/component/TableDictCellProp.vue";

const {
  params,
  columns,
  dataSource,
  query,
  reset,
  deleteSingle,
    copyMenu
} = useEntrance()

//modal
const formModal = ref()

// dict
const dictCollection: any = ref({})
provide(DICT_COLLECTION_SYMBOL, dictCollection)

onMounted(() => {
  useDict("sys_menu_type").then(kv => {
    dictCollection.value = kv
    query()
  })
})

</script>

<template>

  <div class="query-handle-panel">
    <a-form layout="inline" class="query-form">
      <a-form-item label="菜单名称">
        <a-input placeholder="请输入名称" allow-clear v-model:value="params.menuName"/>
      </a-form-item>
      <a-form-item>
        <a-button type="default" @click="query" :icon="h(SearchOutlined)">查询</a-button>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" style="background-color: orange" @click="reset" :icon="h(CiCircleFilled)">重置
        </a-button>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" :icon="h(PlusOutlined)" @click="formModal.showAddForm()">录入</a-button>
      </a-form-item>
    </a-form>
  </div>
  <a-table class="table-container" bordered
           :data-source="dataSource"
           :columns="columns"
           :pagination="false"
           row-key="menuId"
  >
    <template #bodyCell="{column, text,record}">
      <template v-if="column.dataIndex === 'menuType'">
        <table-dict-cell-prop :dict="dictCollection['sys_menu_type']" :value="record.menuType"></table-dict-cell-prop>
      </template>
      <template v-if="column.dataIndex === 'operate'">
        <a-button type="link" @click="formModal.showEditForm(record.menuId)">修改</a-button>
        <a-button type="link" @click="copyMenu(record.menuId)">复制</a-button>
        <a-button type="link" @click="deleteSingle(record.menuId)" danger>删除</a-button>
      </template>
    </template>
  </a-table>
  
  <menu-form ref="formModal" @submit-callback="query"/>

</template>

<style scoped>
.query-handle-panel {
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  margin-bottom: 1rem;
  border-radius: 4px;
  background-color: white;
}

.query-form {
  margin: 1rem;
}

.handle-bar .ant-btn {
  margin-right: 1rem;
}

.table-container{
  padding: .5rem;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  background-color: white;
}
.table{
  margin-top: 1rem;
}
</style>